<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery.min.js"></script>
    <script src="js/turntable.js"></script>

    <link rel="stylesheet" type="text/css" href="/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/themes/icon.css">
    <script type="text/javascript" src="/jquery.easyui.min.js"></script>
    <title>抽奖</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html,body{
            width: 100%;
            height: 100%;
        }

        .lottery {
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
            background:url(images/bg02.jpg) no-repeat 0 0;
            background-size: 100% 100%;
        }

        .lottery img#start {
            position: absolute;
            cursor: pointer;
        }

        #needle{
            position: absolute;
            cursor: pointer;
        }
        #myCanvas{
            position: relative;
            top: 10px;
            left: 30%;
        }
    </style>
    <!--[if lte IE 8]>
        <style>
            .lottery img{
                display: none;
            }   
        </style>
    <![endif]-->
</head>

<body>
    <div id="lottery" class="lottery">
        <canvas id="myCanvas" width="800" height="800">
            当前浏览器版本过低，请使用其他浏览器尝试
        </canvas>
        <img src="/images/start.png" id="start">
        <img src="/images/needle.png" id="needle">
    </div>

    <script>
        // 使用$.get()发送GET请求
        $.get('/product/showlist', function(data) {
            var wheelSurf;
            var initData =data;
            var list = {}
            var angel = 360 / initData.list.length
            // 格式化成插件需要的奖品列表格式
            for (var i = 0, l = initData.list.length; i < l; i++) {
                list[i] = {
                    id:initData.list[i].id,
                    name: initData.list[i].name,
                    image: initData.list[i].image
                }
            }
            // 定义转盘奖品
            wheelSurf = $('#myCanvas').WheelSurf({
                list: list,
                outerCircle: {
                    color: '#df1e15' // 外圈颜色(可选)
                },
                innerCircle: {
                    color: '#f4ad26' // 里圈颜色(可选)
                },
                dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
                disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5'], //中心奖盘的颜色，默认7彩(可选)
                title: {
                    color: '#5c1e08',
                    font: '38px Arial'
                } // 奖品标题样式(可选)
            })
            // 初始化转盘
            wheelSurf.init()
            // 抽奖
            var throttle = true;

            $("#start,#needle").on('click', function () {
                if(!throttle) {
                    $.messager.alert("提醒","正在抽奖，请稍等！");
                    return false;
                }
                throttle = false;
                $.get('/lotteryRecord/lottery', function(data) {
                    if(data.success == 'false') {
                        $.messager.alert("提醒",data.msg);
                        throttle = true;
                        return;
                    }
                    //后台得到抽奖的数据
                    var winData = data.data;
                    var count = 0
                    // 计算奖品角度
                    for (const key in list) {
                        if (list.hasOwnProperty(key)) {
                            if (winData.id == list[key].id) {
                                break;
                            }
                            count++;
                        }
                    }
                    // 转盘抽奖，
                    wheelSurf.lottery((count * angel + angel / 2), function () {
                        $.messager.alert("恭喜","您抽中了 " + winData.name + "<br/>(总数量"+winData.amount+"，剩余"+winData.leftAmount+")");
                        throttle = true;
                    });
                });
            })
        }).fail(function(xhr, status, error) {
            console.error("An error occurred: " + error);
        });

        $(document).ready(function() {
            var screenWidth = $(window).width(); // 浏览器窗口的内部宽度
            var screenHeight = $(window).height(); // 浏览器窗口的内部高度
            var canvasLeft = screenWidth/3.5;
            var startLeft = canvasLeft+230;
            var needleLeft = startLeft+135;
            $("#myCanvas").css({
                left: canvasLeft
            });
            $(".lottery img#start").css({
                top: "230px",
                left: startLeft
            });
            $("#needle").css({
                top: "130px",
                left: needleLeft
            });
            $('body').keydown(function(event) {
                if (event.which === 32) { // 空格键的键码是32
                    $("#start").click();
                }
            });
        });
    </script>
</body>

</html>